<template>
	<view class="body">
		<!-- 个人信息 -->
		<view class="bg-top">
			<view class="cu-card case">
				<view class="cu-item bg-white shadow-warp" style="margin: 0;">
					<navigator v-show="!loginStatus" url="/pages/login/login" hover-class="opcity" :hover-stay-time="150" class="user">
						<view class="cu-list menu-avatar">
							<view class="cu-item">
								<view class="cu-avatar round lg" style="background-image:url(/static/mine_def_touxiang_3x.png);"></view>
								<view class="content flex-sub">
									<view class="text-gray">请登录</view>
								</view>
							</view>
						</view>
					</navigator>
					<view v-show="loginStatus" class="cu-list menu-avatar">
						<view class="cu-item">
							<view class="cu-avatar round lg" :style="'background-image:url('+ avatar +');'"></view>
							<view class="content flex-sub">
								<view class="text-black text-bold">{{name}}</view>
								<view class="text-gray text-sm">
									<text class="text-grey">店铺名称：</text>{{shopName}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<tui-list-view>
			<tui-list-cell @click="addCaseType" :arrow="true">
				<view class="tui-item-box">
					<!-- <tui-icon name="card" :size="24" color="#5677fc"></tui-icon> -->
					<text class="tui-list-cell_name">添加产品分类</text>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="addGoods" :arrow="true">
				<view class="tui-item-box">
					<!-- <tui-icon name="time" :size="24" color="#ff7900"></tui-icon> -->
					<view class="tui-list-cell_name">添加产品</view>
				</view>
			</tui-list-cell>
			<tui-list-cell @click="addCase" :arrow="true">
				<view class="tui-item-box">
					<!-- <tui-icon name="time" :size="24" color="#ff7900"></tui-icon> -->
					<view class="tui-list-cell_name">添加案例</view>
				</view>
			</tui-list-cell>
			<tui-list-cell  :arrow="false">
				<view class="tui-item-box">
					<!-- <tui-icon name="time" :size="24" color="#ff7900"></tui-icon> -->
					<view class="tui-list-cell_name">使用期限:{{shopEndDate}}</view>
				</view>
			</tui-list-cell>
		</tui-list-view>

		
	</view>
</template>

<script>
	export default {
		name: "person",
		data() {
			return {
				loginStatus: false ,
				shopName: "",
				shopEndDate:""
			};
		},
		created() {
			let token = uni.getStorageSync("token");
			if(null != token && undefined != token && "" != token){
				this.loginStatus = true;
				this.shopEndDate = uni.getStorageSync("shopEndDate");
				this.shopName = uni.getStorageSync("shopName");
			}
		},
		methods: {
			addCaseType() {
				if (!this.loginStatus) {
					this.toLogin()
					return;
				}
				uni.navigateTo({
					url: '/pages/person/addCaseType'
				})
			},
			addGoods() {
				if (!this.loginStatus) {
					this.toLogin()
					return;
				}
				uni.navigateTo({
					url: '/pages/person/addGoods'
				})
			},
			addCase() {
				if (!this.loginStatus) {
					this.toLogin()
					return;
				}
				uni.navigateTo({
					url: '/pages/person/addCase'
				})
			},
			toLogin() {
				this.fetch.modal("", "登录信息已失效，请登录", false, () => {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #F9F9F9;
	}
	.body{
		height: 100%;
	}
	.bg-top {
		height: 150rpx;
		width: 100%;
	}
	.hover-item {
		background-color: #eeeeee !important;
	}
	
	.user {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		z-index: 2;
	}
	
	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.tui-ml-auto {
		margin-left: auto;
	}
	
	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}
	
	.btn-feedback {
		background: transparent !important;
		position: absolute;
		height: 100%;
		width: 100%;
		left: 0;
		top: 0;
		border: none;
	}
	.btn-feedback:after {
		border: none;
	}
</style>
